<template>
  <el-container>
    <el-header>
      <Menu></Menu>
    </el-header>
    <el-main>
      <div style="height:auto">
        <el-carousel
          indicator-position="outside"
          height="400px"
        >
          <el-carousel-item
            v-for="item in 4"
            :key="item"
          >
            <h3>{{ item }}</h3>
          </el-carousel-item>
        </el-carousel>

        <el-tabs
          v-model="activeName"
          @tab-click="handleClick"
          style="margin-left:25%;margin-top:2%;margin-right:25%;height:auto"
        >
          <el-tab-pane
            label="推荐赛事"
            name="first"
          >
            <div>
              <div
                v-for="(item) in list"
                :key="item.id"
                style="text-align:left"
              >
                <span style="font-size:16px;color:#22BFA7">赛事名称：</span>
                <a style="font-size:24px;font-weight:bold">{{item.name}}</a>
                <br>

                <span style="margin-left:38px;font-size:13px;color:#B0B0B0;font-weight:bold">
                  级别：<span style="font-weight:lighter!important;color:#B3B3B3">{{item.level}}</span>
                </span>
                <br>

                <span style="margin-left:12px;font-size:13px;color:#B0B0B0;font-weight:bold">
                  报名时间：<span style="font-weight:lighter!important;color:#B3B3B3">{{item.time}}</span>
                </span>

                <el-button
                  plain
                  style="color:#0074B6;margin-left:420px"
                >了解详情</el-button>
                <el-divider></el-divider>
              </div>

              <div style="height:200px;">
                <a
                  style="text-align:center"
                  v-on:mouseenter="enter"
                  id="load"
                  @click='loadmore("number")'
                >
                  <span v-if='number<list.length'>
                    点击加载更多
                  </span>

                  <span v-if='number>=list.length'>
                    已无更多
                  </span>
                </a>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane
            label="外语"
            name="second"
          >
            <div>
              <div
                v-for="(item) in list"
                :key="item.id"
                style="text-align:left"
              >
                <span style="font-size:16px;color:#22BFA7">赛事名称：</span>
                <a style="font-size:24px;font-weight:bold">{{item.name}}</a>
                <br>

                <span style="margin-left:38px;font-size:13px;color:#B0B0B0;font-weight:bold">
                  级别：<span style="font-weight:lighter!important;color:#B3B3B3">{{item.level}}</span>
                </span>
                <br>

                <span style="margin-left:12px;font-size:13px;color:#B0B0B0;font-weight:bold">
                  报名时间：<span style="font-weight:lighter!important;color:#B3B3B3">{{item.time}}</span>
                </span>

                <el-button
                  plain
                  style="color:#0074B6;margin-left:420px"
                >了解详情</el-button>
                <el-divider></el-divider>
              </div>

              <div style="height:200px;">
                <a
                  style="text-align:center"
                  v-on:mouseenter="enter"
                  id="load"
                  @click='loadmore("English")'
                >
                  <span v-if='English<list.length'>
                    点击加载更多
                  </span>

                  <span v-if='English>=list.length'>
                    已无更多
                  </span>
                </a>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane
            label="数学建模"
            name="third"
          >
            <div>
              <div
                v-for="(item) in list"
                :key="item.id"
                style="text-align:left"
              >
                <span style="font-size:16px;color:#22BFA7">赛事名称：</span>
                <a style="font-size:24px;font-weight:bold">{{item.name}}</a>
                <br>

                <span style="margin-left:38px;font-size:13px;color:#B0B0B0;font-weight:bold">
                  级别：<span style="font-weight:lighter!important;color:#B3B3B3">{{item.level}}</span>
                </span>
                <br>

                <span style="margin-left:12px;font-size:13px;color:#B0B0B0;font-weight:bold">
                  报名时间：<span style="font-weight:lighter!important;color:#B3B3B3">{{item.time}}</span>
                </span>

                <el-button
                  plain
                  style="color:#0074B6;margin-left:420px"
                >了解详情</el-button>
                <el-divider></el-divider>
              </div>

              <div style="height:200px;">
                <a
                  style="text-align:center"
                  v-on:mouseenter="enter"
                  id="load"
                  @click='loadmore("Math")'
                >
                  <span v-if='Math1<list.length'>
                    点击加载更多
                  </span>

                  <span v-if='Math1>=list.length'>
                    已无更多
                  </span>
                </a>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane
            label="计算机程序设计"
            name="fourth"
          >
            <div>
              <div
                v-for="(item) in list"
                :key="item.id"
                style="text-align:left"
              >
                <span style="font-size:16px;color:#22BFA7">赛事名称：</span>
                <a style="font-size:24px;font-weight:bold">{{item.name}}</a>
                <br>

                <span style="margin-left:38px;font-size:13px;color:#B0B0B0;font-weight:bold">
                  级别：<span style="font-weight:lighter!important;color:#B3B3B3">{{item.level}}</span>
                </span>
                <br>

                <span style="margin-left:12px;font-size:13px;color:#B0B0B0;font-weight:bold">
                  报名时间：<span style="font-weight:lighter!important;color:#B3B3B3">{{item.time}}</span>
                </span>

                <el-button
                  plain
                  style="color:#0074B6;margin-left:420px"
                >了解详情</el-button>
                <el-divider></el-divider>
              </div>

              <div style="height:200px;">
                <a
                  style="text-align:center"
                  v-on:mouseenter="enter"
                  id="load"
                  @click='loadmore("Computer")'
                >
                  <span v-if='Computer<list.length'>
                    点击加载更多
                  </span>

                  <span v-if='Computer>=list.length'>
                    已无更多
                  </span>
                </a>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane
            label="创意设计"
            name="fifth"
          >
            <div>
              <div
                v-for="(item) in list"
                :key="item.id"
                style="text-align:left"
              >
                <span style="font-size:16px;color:#22BFA7">赛事名称：</span>
                <a style="font-size:24px;font-weight:bold">{{item.name}}</a>
                <br>

                <span style="margin-left:38px;font-size:13px;color:#B0B0B0;font-weight:bold">
                  级别：<span style="font-weight:lighter!important;color:#B3B3B3">{{item.level}}</span>
                </span>
                <br>

                <span style="margin-left:12px;font-size:13px;color:#B0B0B0;font-weight:bold">
                  报名时间：<span style="font-weight:lighter!important;color:#B3B3B3">{{item.time}}</span>
                </span>

                <el-button
                  plain
                  style="color:#0074B6;margin-left:420px"
                >了解详情</el-button>
                <el-divider></el-divider>
              </div>

              <div style="height:200px;">
                <a
                  style="text-align:center"
                  v-on:mouseenter="enter"
                  id="load"
                  @click='loadmore("Devise")'
                >
                  <span v-if='Devise<list.length'>
                    点击加载更多
                  </span>

                  <span v-if='Devise>=list.length'>
                    已无更多
                  </span>
                </a>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane
            label="大数据"
            name="sixth"
          >
            <div>
              <div
                v-for="(item) in list"
                :key="item.id"
                style="text-align:left"
              >
                <span style="font-size:16px;color:#22BFA7">赛事名称：</span>
                <a style="font-size:24px;font-weight:bold">{{item.name}}</a>
                <br>

                <span style="margin-left:38px;font-size:13px;color:#B0B0B0;font-weight:bold">
                  级别：<span style="font-weight:lighter!important;color:#B3B3B3">{{item.level}}</span>
                </span>
                <br>

                <span style="margin-left:12px;font-size:13px;color:#B0B0B0;font-weight:bold">
                  报名时间：<span style="font-weight:lighter!important;color:#B3B3B3">{{item.time}}</span>
                </span>

                <el-button
                  plain
                  style="color:#0074B6;margin-left:420px"
                >了解详情</el-button>
                <el-divider></el-divider>
              </div>

              <div style="height:200px;">
                <a
                  style="text-align:center"
                  v-on:mouseenter="enter"
                  id="load"
                  @click='loadmore("Bigdata")'
                >
                  <span v-if='Bigdata<list.length'>
                    点击加载更多
                  </span>

                  <span v-if='Bigdata>=list.length'>
                    已无更多
                  </span>
                </a>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-main>
  </el-container>

</template>

<script>
import Menu from '../components/Menu.vue'

export default {
  components: {
    Menu
  },
  data () {
    return {
      activeName: 'second',
      number: 6, // 储存当前页面显示多少项
      English: 6,
      Math1: 6,
      Devise: 6,
      Bigdata: 6,
      Computer: 6,
      list: [
        { id: 1, name: '大学四级', time: '2020.1.20', level: 'school' },
        { id: 2, name: '大学四级', time: '2020.1.20', level: 'school' },
        { id: 3, name: '大学四级', time: '2020.1.20', level: 'school' },
        { id: 4, name: '大学四级', time: '2020.1.20', level: 'school' },
        { id: 5, name: '大学四级', time: '2020.1.20', level: 'school' },
        { id: 6, name: '大学四级', time: '2020.1.20', level: 'school' },
        { id: 7, name: '大学四级', time: '2020.1.20', level: 'school' },
        { id: 8, name: '大学四级', time: '2020.1.20', level: 'school' },
        { id: 9, name: '大学四级', time: '2020.1.20', level: 'school' },
        { id: 10, name: '大学四级', time: '2020.1.20', level: 'school' },
        { id: 11, name: '大学四级', time: '2020.1.20', level: 'school' },
        { id: 12, name: '大学四级', time: '2020.1.20', level: 'school' },
        { id: 13, name: '大学四级', time: '2020.1.20', level: 'school' }
      ]
    }
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
    },
    enter: function () {
      this.active = 'color:lightblue'
    },
    // 点击加载更多比赛
    loadmore (str) {
      if (str === 'number') { this.number += 6 } else if (str === 'English') { this.English += 6 } else if (str === 'Math1') { this.Math1 += 6 } else if (str === 'Devise') { this.Devise += 6 } else if (str === 'Computer') { this.Computer += 6 } else if (str === 'Bigdata') { this.Bigdata += 6 }
    }
  }
}
</script>

<style lang="less" scoped>
.el-header {
  position: fixed;
  padding: 0;
}
.el-main {
  padding-top: 70px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d7e6d3;
}

a:hover {
  cursor: pointer;
}
</style>
